<template>
  <div class="pdf">
    <div class="toolbar">
      <div class="toolbarContainer">
        <div class="toolbarViewerLeft">
          <span>
            <input type="text" v-model="pageNum" class="page-input" />
            /{{ pageTotalNum }}</span
          >
          <span
            class="icon-pdf el-icon-top"
            @click.stop="prePage"
            title="上一页"
          ></span>
          <span
            class="icon-pdf el-icon-bottom"
            @click.stop="nextPage"
            title="下一页"
          ></span>
        </div>
        <div class="toolbarViewerRight"> </div>
        <div class="toolbarViewerMiddle">
          <span
            class="icon-pdf el-icon-refresh-left"
            @click="counterClock"
            title="逆时针"
          ></span>
          <span
            class="icon-pdf el-icon-refresh-right"
            @click="clock"
            title="顺时针"
          ></span>
          <span
            class="icon-pdf el-icon-plus"
            @click="scaleD"
            title="放大"
          ></span>
          <span
            class="icon-pdf el-icon-minus"
            @click="scaleX"
            title="缩小"
          ></span>
        </div>
      </div>
    </div>
    <div class="sidebarContainer">
      <ul v-if="loadedRatio == 1">
        <li
          v-for="v in pageTotalNum"
          :key="v"
          @click="pageNum = v"
          :class="{ current: v == pageNum }"
        >
          <pdf :src="pdfUrl" :page="v"> </pdf>
        </li>
      </ul>
    </div>
    <div
      class="viewerContainer"
      v-loading="loadedRatio != 1"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
    >
      <div class="viewer">
        <div class="page">
          <pdf
            ref="pdf"
            :src="pdfUrl"
            :page="pageNum"
            :rotate="pageRotate"
            @progress="loadedRatio = $event"
            @page-loaded="pageLoaded($event)"
            @num-pages="pageTotalNum = $event"
            @error="pdfError($event)"
            @link-clicked="page = $event"
          >
          </pdf>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfUrl: '',
      // 总页数
      pageTotalNum: 1,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 100,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let { id } = this.$route.query
      let url = this.baseURL + '/openApi/office/office2pdf/' + id
      this.pdfUrl = url
      //   setInterval(() => {
      //     console.log(this.pageTotalNum)
      //   }, 1000)
    },
    //放大
    scaleD() {
      this.scale += 5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },
    //缩小
    scaleX() {
      // scale 是百分百展示 不建议缩放
      if (this.scale == 100) {
        return
      }
      this.scale += -5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },
    // 切换上一页
    prePage() {
      var p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    // 切换下一页
    nextPage() {
      var p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    // 顺时针选中角度
    clock() {
      this.pageRotate += 90
    },
    // 逆时针旋转角度
    counterClock() {
      this.pageRotate -= 90
    },
    // 页面加载成功  当前页数
    pageLoaded(e) {
      this.$emit('current', e)
      this.curPageNum = e
    },
    // 异常监听
    pdfError(error) {
      console.error(error)
    },
  },
}
</script>
<style scoped lang="scss">
.pdf {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 350px;
  .toolbar {
    position: relative;
    left: 0;
    right: 0;
    z-index: 9999;
    cursor: default;
    .toolbarContainer {
      position: relative;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      background-color: rgb(249, 249, 249);
      box-shadow: 0 1px 0 rgb(204, 204, 204);
      .icon-pdf {
        font-size: 20px;
        cursor: pointer;
        &:hover {
          color: var(--colorH1);
        }
      }
    }
    .toolbarViewerLeft {
      float: left;
      padding-left: 1px;
      .page-input {
        display: inline-block;
        width: 50px;
        height: 20px;
        line-height: 20px;
        outline: none;
      }
    }
    .toolbarViewerRight {
      float: right;
      padding-right: 1px;
    }
    .toolbarViewerMiddle {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .sidebarContainer {
    position: absolute;
    top: 32px;
    bottom: 0;
    width: 200px;
    z-index: 100;
    overflow: auto;
    border-top: 1px solid rgba(51, 51, 51, 1);
    background: #d5d5d8;
    ul {
      width: calc(100% - 60px);
      padding: 10px 30px 0;
      li {
        float: left;
        margin: 0 10px 5px;
        border: 3px solid #999;
        cursor: pointer;
        &.current,
        &:hover {
          border: 3px solid var(--colorH1);
        }
      }
    }
  }
  .viewerContainer {
    overflow: auto;
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: 210px;
    outline: none;
    background: #ededf0;
    .viewer {
      .page {
        position: absolute;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>